import React, { FC, useState, useEffect } from 'react'
import { Button } from 'antd'

import ProductionVoucher from '~/components/production-voucher'
import TopHeader, { ListTitle } from '~/components/top-header'
import { useNavigate, useLocation } from 'react-router-dom'
import { queryBorrowCastItems, confirmBorrow } from '~/api/property-management-api'
import { getUserInfo } from '~/mock/user/userinfo'
import SuccessModal from '~/components/submit-successfully'
import UploadCom from '~/components/my-upload'

import WaitingList from './container/waiting-list'
import MovedList from './container/moved-list'
import { FooterAction } from './styled'

const docs = new Map()
const itemPics = new Map()
const userPics = new Map()

const PropertyInvolved: FC = () => {
  const navigate = useNavigate()
  const [certificateVisible, setCertificateVisible] = useState(false)
  const [castItems, setCastItems] = useState([])
  const [successVisible, setSuccessVisible] = useState(false)
  const { state }: any = useLocation()

  const {
    batchNo,
    caseName,
    caseNo,
    caseCompanyName,
    caseDepartmentName,
    createCompanyName,
    createDepartmentName,
    caseState
  } = state

  const isWait = caseState === 1

  const handleGetCastItems = async () => {
    const userInfo = getUserInfo()
    const { data } = await queryBorrowCastItems({
      ...userInfo,

      batchNo,
      status: isWait ? ['AGREE_APPROVE'] : ['BORROW', 'BACK']
    })
    setCastItems(data)
  }

  const onClickCertifie = async (preview?: boolean) => {
    const userInfo = getUserInfo()
    const { data } = await confirmBorrow({
      ...userInfo,
      batchNo,
      caseName,
      caseNo,
      docs: [...docs.values()],
      itemPics: [...itemPics.values()],
      userPics: [...userPics.values()],
      preview: !!preview
    })
    window.open(data.url)
    if (preview) return
    setSuccessVisible(true)
  }

  useEffect(() => {
    handleGetCastItems()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen: [
        { label: '办案单位:', value: caseCompanyName || createCompanyName },
        { label: '办案部门:', value: caseDepartmentName || createDepartmentName }
      ]
    }
  ]

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle />
      <main style={{ marginTop: 21 }}>
        {/* <Form layout="inline" form={form} style={{ marginBottom: 16 }}>
          <Form.Item name="1" label="案件编号：">
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="2" label="案件名称：">
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button onClick={() => resetFields()} type="link" style={{ padding: 0 }}>
              清空选项
            </Button>
          </Form.Item>
        </Form> */}
        {isWait ? <WaitingList castItems={castItems} /> : <MovedList castItems={castItems} />}
        <div>
          <UploadCom
            frontend="frontendepic"
            onSuccess={({ storeId, name, files }: any) => {
              docs.set(files.name, { storeId, name })
            }}
            onRemove={(file: any) => {
              docs.delete(file.name)
              console.log('onRemove', file)
            }}
            title="上传借用物品信息"
          />
        </div>
        <div style={{ marginTop: 24 }}>
          <UploadCom
            frontend="frontendedoc"
            onSuccess={({ storeId, name, files }: any) => {
              console.log('files', files)
              itemPics.set(files.name, { storeId, name })
            }}
            onRemove={(file: any) => {
              itemPics.delete(file.name)
              console.log('onRemove', file)
            }}
            title="上传法律文书"
          />
        </div>
        <div style={{ marginTop: 24 }}>
          <UploadCom
            frontend="frontendepic"
            onSuccess={({ storeId, name, files }: any) => {
              console.log('files', files)
              userPics.set(files.name, { storeId, name })
            }}
            onRemove={(file: any) => {
              userPics.delete(file.name)
              console.log('onRemove', file)
            }}
            title="借用人拍照"
          />
        </div>

        <FooterAction>
          {isWait ? (
            <div>
              <Button
                onClick={() => {
                  navigate(-1)
                }}
                style={{ marginLeft: 8 }}
              >
                返回
              </Button>
              <Button onClick={() => onClickCertifie(true)} style={{ marginLeft: 8 }}>
                预览借用凭证
              </Button>
              <Button onClick={() => onClickCertifie()} style={{ marginLeft: 8 }} type="primary">
                制作借用凭证
              </Button>
            </div>
          ) : (
            <Button
              onClick={() => {
                navigate(-1)
              }}
              style={{ marginLeft: 8 }}
            >
              返回
            </Button>
          )}
        </FooterAction>
        <ProductionVoucher
          onOk={() => {
            setCertificateVisible(false)
          }}
          onCancel={() => {
            setCertificateVisible(false)
          }}
          visible={certificateVisible}
        />
      </main>
      <SuccessModal visible={successVisible} />
    </div>
  )
}

export default PropertyInvolved
